import { Card, Table, Button, Form, Input, Select } from 'antd'
import { apigetList,apiDeleteItem  } from "../api";
import React, { useEffect, useState } from 'react'

// 获取表单实例
const { useForm } = Form

const { Option } = Select


const Home = () => {

    const [list, setList] = useState([])

    const [searchData, setSearchData] = useState({})

    const [page, setPage] = useState({
        current: 1, // 当前页码
        pageSize: 10, // 每页条数
        total: 0 // 数据的总条数
    })

    // 总条数
    const [total, setTotal] = useState(0)

    const [form] = useForm()


    const columns = [
        {
            title: "名称",
            dataIndex: "title"
        },
        {
            title: "路径",
            dataIndex: "path"
        },
        {
            title: "阅读量",
            dataIndex: "pv"
        },
        {
            title: "状态",
            dataIndex: "status"
        },
        {
            title: "发布时间",
            dataIndex: "date"
        },
        {
            title: "操作",
            render: (row) => {
                return <div>
                    <Button type="link" onClick={() => deleteItem(row)}>删除</Button>
                </div>
            }
        }
    ];

    const StatusList = ["草稿", "已发布", "待发布", "已删除"]

    useEffect(() => {
        getList()
    }, [page, searchData])

    // 删除
    const deleteItem = (data) => {
        apiDeleteItem({id: data.id}).then(res => {
            getList()
        })
    }

    // 获取列表
    const getList = () => {
        apigetList({ ...page, ...searchData }).then(res => {
            setList(res.data)

            setTotal(res.total)
        })
    }

    // 更改分页器触发的函数
    const changeList = (data) => {
        setPage(data)
    }

    // 搜索
    const onFinish = (data) => {
        setPage({
            ...page,
            current: 1
        })

        setSearchData(data)
    }

    // 搜索框重置
    const resetForm = () => {
        // 重置表单 清除页面中的内容
        form.resetFields()

        setSearchData({})

        setPage({
            current: 1,
            pageSize: 10
        })

    }


    return <div>
        <Card title="搜索" >
            <Form
                layout="inline"
                onFinish={onFinish}
                form={form}
            >
                <Form.Item
                    label="名称"
                    name="title"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="路径"
                    name="path"
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="状态"
                    name="status"
                >
                    <Select style={{ width: "150px" }}>
                        {
                            StatusList.map((item, idx) => {
                                return <Option key={idx} value={item}>{item}</Option>
                            })
                        }
                    </Select>
                </Form.Item>

                <Form.Item>
                    <Button htmlType="submit">搜索</Button>
                    <Button onClick={resetForm}>重置</Button>
                </Form.Item>
            </Form>

        </Card>

        <Card title="列表">
            <Table
                rowKey="id"
                dataSource={list}
                columns={columns}
                pagination={{ ...page, total: total }}
                onChange={changeList}
            />
        </Card>

    </div>
}

export default Home